<template>
  <tc-flex class="tabs-container">
    <tc-flex class="flex-fl" 
    @click="onClick(index)"
    v-for="(item, index) in list" :key="index">
      <tc-flex :class="[activeIndex === index ? 'active' : 'tab']">
        <span>{{ item.name }}</span>
      </tc-flex>
    </tc-flex>
  </tc-flex>
</template>

<script lang="ts">
  import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'
  import jQuery from 'jquery'

  @Component
  export default class TcTabs extends Vue{
    @Prop()
    list: any[]
    
    activeIndex = 0

    @Emit('click')
    onClick (index) {
      this.activeIndex = index
    }

    mounted () {
      if (window.cordova) {
        jQuery('.tabs-container').css('padding-top', '20px');
      }
    }
  }
</script>


<style lang="less" scoped>
@import (reference) "~@/less/resources.less";
.theme(@background-color, @font-color, @active-color){
  .tabs-container{
    position: sticky;
    top: @tc-header-height;
    left: 0;
    z-index: 99;
    height: @tc-tabs-height;
    background-color: @background-color;
    border-bottom: @border-value;

    .active{
      color: @active-color;
      height: @tc-tabs-height - @separation-xxs;
      border-bottom: @border-value;
      border-bottom-width: @separation-xxs;
      border-bottom-color: @active-color;
    }

    .tab{
      color: @font-color;
      height: @tc-tabs-height;
      border-bottom: none;
    }
  }
}
.theme-default{
  .theme(@default-tc-tabs-background-color, @default-tc-tabs-font-color, @default-tc-tabs-active-color)
}
.theme-dark{
  .theme(@dark-tc-tabs-background-color, @dark-tc-tabs-font-color, @dark-tc-tabs-active-color)
}
</style>
